<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="headding">
			<view class="header"><span class="header-s">客户</span></view>
			<view class="seach">
				<view class="seach-s">
					<image src="../../static/images/tb_search.png" mode=""></image>
					<input type="text" value="" placeholder="请输入关键词..." v-model="seach" />
				</view>
				<view class="seach-e"><image src="../../static/slice/people.png" mode="" @click="go"></image></view>
			</view>
			<view class="classify">
				<view class="classify-l" @click="receivable(0)" :class="{ hover: type === 0 ? hover : '' }">按欠款排序</view>
				<view class="classify-l" @click="receivable(1)" :class="{ hover: type === 1 ? hover : '' }">按欠货排序</view>
				<!-- 	<view class="classify-l" @click="receivable(2)" :class="{ hover: type === 2 ? hover : '' }">按A-Z排序</view> -->
			</view>
		</view>
		<view class="bbadt">
			<view class="box" v-show="boxShow">
				<image src="../../static/slice/ling.png" mode=""></image>
				<view class="name">零售客户</view>
			</view>
			<view class="box" v-show="!boxShow" v-for="item in ady" :key="item.customer_id" @click="gggo(item)">
				<!-- <image src="../../static/slice/ling.png" mode=""></image> -->
				<view class="bat">{{ item.name.charAt(0) }}</view>
				<view class="user">
					<view class="user-t">{{ item.name }}</view>
					<view class="user-b">{{ item.telephone }}</view>
				</view>
				<view class="debt">
					<!-- 欠款￥{{item.receivable }} -->
					{{ fang(item) }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import cnchar from 'cnchar';
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			type: -1,
			hover: true,
			boxShow: true,
			showPic: '',
			arr: {},
			Arry: [],
			na: [],
			adx: [],
			ady: [],
			via: [
				{
					city: '',
					phone: 'b',
					name: 'c',
					money: 'd'
				},
				{
					city: '',
					phone: 'b',
					name: 'c',
					money: 'd'
				}
			],
			nameOne: '',
			seach: ''
		};
	},
	onShow() {
		this.showUser();
	},
	onLoad() {
		this.showUser();
	},
	methods: {
		go() {
			uni.navigateTo({
				url: '../clientservice/site?user=' + JSON.stringify('')
			});
			JSON.stringify('');
		},
		showUser() {
			let that = this;
			that.$ajax('api/v1.customer/index', {}, 'GET').then(res => {
				console.log(res);
				if (res.length == '0') {
					this.boxShow = true;
				} else {
					this.boxShow = false;
					this.arr = res.result;
					this.ady = res.result;
				}
			});
		},
		receivable(e) {
			this.type = e;

			function compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1;
				};
			}
			if (this.type == 0) {
				this.arr = this.arr.sort(compare('receivable'));
			}
			if (this.type == 1) {
				this.arr = this.arr.sort(compare('owe_sum'));
			}
			if (this.type == 2) {
				this.arr.forEach(item => {
					this.Arry.push(item.name);
				});
				const a = [...new Set(this.Arry)];
				a.forEach(item => {
					this.na.push(cnchar.spell(item));
				});
				// console.log(this.na);
				this.na.forEach(item => {
					this.adx.push(item.charAt(0));
				});
				// console.log('1111111');
				// console.log(this.adx);
				// console.log('1111111');
				this.adx.forEach(item => {
					this.via.city = item;
				});
				// console.log(this.via);
			}
		},
		fang(item) {
			// console.log(this.type);
			// console.log(item.owe_sum);
			if (this.type == 0) {
				return '欠款￥' + item.receivable;
			}
			if (this.type == 1) {
				return '欠货' + item.owe_sum;
			}
		},
		gggo(e) {
			(this.type = -1), console.log(e);

			uni.setStorageSync('User', e);
			uni.navigateTo({
				url: '../clientservice/clientPage?id=' + JSON.stringify(e)
			});
		}
	},
	watch: {
		seach(newValue, oldValue) {
			this.ady = this.arr;
			this.seach = newValue;
			this.ady = this.ady.filter(item => {
				return item.name.indexOf(this.seach) != -1;
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.headding {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 3;
}
.bbadt {
	margin-top: 330rpx;
}
.header {
	width: 100%;
	padding: 50upx 0 30upx 0;
	background-color: #249af6;
	box-sizing: border-box;
	text-align: center;
	.header-s {
		width: 143rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 48rpx;
	}
}
.seach {
	width: 100%;
	box-sizing: border-box;
	height: 107rpx;
	background-color: #249af6;
	padding-left: 32rpx;
	display: flex;

	.seach-s {
		width: 613rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 99999rpx;
		padding-left: 27rpx;
		display: flex;
		box-sizing: border-box;
		input {
			padding-top: 10rpx;
			border-style: none;
			padding-left: 34rpx;
		}
		image {
			width: 31rpx;
			height: 28rpx;
			margin-top: 15rpx;
			margin-right: 20rpx;
		}
	}
	.seach-e {
		image {
			width: 44rpx;
			height: 44rpx;
			margin-top: 6rpx;
			margin-left: 26rpx;
		}
	}
}
.classify {
	background-color: #eeeeee;
	display: flex;
	justify-content: space-around;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	height: 90rpx;
	line-height: 90rpx;
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 11rpx;
	}
}
.ima {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 227rpx;
}
.hover {
	border-bottom: 4rpx #249af6 solid;
}
.box {
	// margin-top: 200rpx;
	margin-bottom: 20rpx;
	height: 160rpx;
	background-color: #ffffff;
	display: flex;
	line-height: 160rpx;
	position: relative;
	.bat {
		width: 100rpx;
		height: 100rpx;
		border-radius: 999rpx;
		background-color: rgba(0, 130, 232, 1);
		margin: 30rpx;
		color: #ffffff;
		line-height: 100rpx;
		text-align: center;
	}
	image {
		width: 100rpx;
		height: 100rpx;
		margin: 30rpx;
	}
	.user {
		position: relative;
		top: 15rpx;
		line-height: 65rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.debt {
		position: absolute;
		right: 31rpx;
		top: -30rpx;
		color: #666666;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
}
</style>
